import React, { Component } from "react";
import {withRouter} from "react-router-dom"
import axios from "axios";


class NewsActivities extends Component {
  constructor(props) {
    super(props);
    this.state = {
      articleList: [],
      num: 1,
    };
  }

  replace = (str) => {
    let con = str.replace(/\s*/g, ""); //去掉空格
    let res = con.replace(/<[^>]+>/g, ""); //去掉所有的html标记
    let res1 = res.replace(/↵/g, ""); //去掉所有的↵符号
    let res2 = res1.replace(/[\r\n]/g, ""); //去掉回车换行
    return res2;
  }

  readMore = () =>{
    this.setState({
        num: this.state.num+1
    })
    setTimeout(()=>{
        this.getArticleList()
    },200)
  }

  newsDetail = (id) =>{
    console.log(id)
    console.log(this.props);
    
    this.props.history.push(`/news/${id}`,{msg:"新闻详情"})
  }

  getArticleList = async () => {
    const res = await axios.get(
      `https://mjuruankai.com/api/web/article_list/?page=${this.state.num}`
    );
    this.setState({
      articleList: [...this.state.articleList,...res.data.list],
    });
    console.log(res.data.list);
  };
  componentDidMount() {
    this.getArticleList();
  }
  render() {
    const { articleList } = this.state;
    return (
      <section id="company-activities" className="company-activities">
        <h2 className="title1">公司动态</h2>
        <p className="intro">关注公司动态，第一时间获取一手消息</p>
        <div className="activities">
          {articleList.length !== 0 ? (
            articleList.map((article, index) => {
              return (
                <div className="activity" key={index}>
                  <div className="act-image-wrapper">
                    <img
                      src={
                        "https://mjuruankai.com" + article.fields.cover_image
                      }
                      alt=""
                    />
                  </div>
                  <div className="meta">
                    <p className="data-published">
                      <i className="far fa-calendar">
                        {new Date(article.fields.date_created).getFullYear() +
                          "-" +
                          (new Date(article.fields.date_created).getMonth() +
                            1) +
                          "-" +
                          new Date(article.fields.date_created).getDate()}
                      </i>
                    </p>
                    <p className="comments">
                      <i className="far fa-comments"></i>{article.fields.like}条评论
                    </p>
                  </div>
                  <h2 className="act-title">{article.fields.title}</h2>
                  <article>{ this.replace(article.fields.content.slice(0, 42)) + "..." }</article>
                  <button className="readmore-btn" onClick={()=>this.newsDetail(article.pk)}>阅读更多</button>
                </div>
              );
            })
          ) : (
            <div style={{textAlign:"center"}}>加载中</div>
          )}
        </div>
        <button className="readmore-btn" onClick={this.readMore}>阅读更多</button>
      </section>
    );
  }
}

export default withRouter(NewsActivities);
